<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <div
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12"
          id="section-cover">
          <n-space vertical justify="center" align="center" class="h-full text-center">
            <h1 class="text-2xl font-bold tracking-widest">入党积极分子考察表</h1>
            <n-space vertical :size="16" class="mt-24 text-sm">
              <n-space align="center">
                <span class="inline-block w-28  [text-align-last:justify]">
                  姓名</span>
                <span class="underline min-w-[200px] text-center">{{ member.memberName }}</span>
              </n-space>
              <n-space align="center">
                <span class="inline-block w-28  [text-align-last:justify]">
                  所在党支部名称</span>
                <span class="underline min-w-[200px] text-center">对应日期所在党支部</span>
              </n-space>
              <n-space align="center">
                <span class="inline-block w-28  [text-align-last:justify]">
                  确定积极分子日期</span>
                <span class="underline min-w-[200px] text-center flex items-center">
                  <n-tooltip v-if="getValidationInfo('activistDesignationDate')" trigger="hover">
                    <template #trigger>
                      <n-icon :size="16" :color="getLevelColor(getValidationInfo('activistDesignationDate').level)"
                        class="mr-1.5">
                        <component :is="getIconComponent(getValidationInfo('activistDesignationDate').level)" />
                      </n-icon>
                    </template>
                    <span>{{ getValidationInfo('activistDesignationDate').message }}</span>
                  </n-tooltip>
                  {{ formatDate(member.activistAssessment?.activistDesignationDate) }}
                </span>
              </n-space>
            </n-space>
          </n-space>
        </div>

        <div id="section-instruction"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12">
          <n-space vertical class="h-full">
            <div class="text-center font-bold text-lg">说 明</div>
            <n-space vertical :size="8" class="text-sm leading-relaxed mt-4">
              <div>1. 对入党积极分子每季度考察写实一次。写实要具体、实事求是。</div>
              <div>
                2.
                "培养人意见"栏，由培养人填写："党小组意见"栏，经党小组党员讨论后，由党小组长填写："群众意见"栏，在支部负责人组织群众座谈后，由党支部组织委员填写："党支部意见"栏，由支委会集体研究，支部书记负责填写。
              </div>
              <div>3. 积极分子工作调动时，原单位党组织要将此表转给调入单位的党组织。</div>
              <div>4. 积极分子被批准为预备党员后，党组织要将此表妥为保存。</div>
              <div>5. 此表限于有关人员和党组织填写、掌握，入党积极分子本人不能借阅。</div>
            </n-space>
          </n-space>
        </div>

        <div id="section-basic-info"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4">
          <div class="border border-solid border-black h-full">
            <table class="border-collapse h-full w-full text-[10px] leading-[1.2]">
              <colgroup>
                <col class="w-[13.33%]">
                <col class="w-[20%]">
                <col class="w-[13.33%]">
                <col class="w-[20%]">
                <col class="w-[13.33%]">
                <col class="w-[20%]">
              </colgroup>

              <tbody>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">姓 名</td>
                  <td class="border border-solid border-black px-1 py-0.5 text-center">{{ member.memberName }}</td>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">性 别</td>
                  <td class="border border-solid border-black px-1 py-0.5 text-center">{{ member.genderType }}</td>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">民 族</td>
                  <td class="border border-solid border-black px-1 py-0.5 text-center">{{ member.nationalityDesc }}</td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">出生年月</td>
                  <td class="border border-solid border-black px-1 py-0.5 text-center">{{
                    formatDate(member.birthDate, 'YYYY年MM月')
                  }}</td>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">文化程度</td>
                  <td class="border border-solid border-black px-1 py-0.5 text-center">本科/高中/其他</td>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">
                    现任职务
                  </td>
                  <td class="border border-solid border-black px-1 py-0.5 text-center">无</td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">原 籍</td>
                  <td colspan="2" class="border border-solid border-black px-1 py-0.5 text-center">{{ member.birthPlace
                  }}</td>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">参加工作时间</td>
                  <td colspan="2" class="border border-solid border-black px-1 py-0.5 text-center">无</td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">申请入党时间</td>
                  <td colspan="2" class="border border-solid border-black px-1 py-0.5 text-center">{{
                    formatDate(member.applicationForm?.signatureDate,'YYYY年MM月DD日') }}</td>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">列为积极分子时间</td>
                  <td colspan="2" class="border border-solid border-black px-1 py-0.5 text-center">{{
                    formatDate(member.activistAssessment?.activistDesignationDate,'YYYY年MM月DD日') }}</td>
                </tr>

                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 text-center font-bold">
                    本人简历（包括学历）
                  </td>
                  <td colspan="5" class="border border-solid border-black p-4 text-left">
                    2007年9月至2013年6月，某某小学，学生，证明人：王老师<br>
                    2013年9月至2016年6月，某某中学，学生，证明人：李老师<br>
                    2016年9月至2019年6月，某某中学，学生，证明人：张老师<br>
                    2019年9月至今，东北大学软件学院，本科生
                  </td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 text-center font-bold">
                    家庭主要成员职业和政治面貌情况 </td>
                  <td colspan="5" class="border border-solid border-black p-4 text-left">
                    父亲：张三，工人，群众<br>
                    母亲：李四，教师，中共党员
                  </td>
                </tr>

                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 text-center font-bold">
                    主要社会关系情况
                  </td>
                  <td colspan="5" class="border border-solid border-black p-4 text-left">
                    无特殊情况
                  </td>
                </tr>

                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center">
                    何时何地参加过何种党派或团体任何职务:
                  </td>
                  <td colspan="5" class="border border-solid border-black p-4 text-left">
                    {{ `于
                    ${formatDate(member.joinLeagueDate) ||
                      ''} 在某某单位加入中国共产主义青年团` }}</td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 text-center font-bold align-center">
                    何时何地受过何种奖励或处分:
                  </td>
                  <td colspan="5" class="border border-solid border-black p-4 text-left">

                    无
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div id="section-mentor-info"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4">
          <div class="border border-solid border-black h-full">
            <table class="border-collapse h-full w-full text-[10px] leading-[1.2]">
              <tbody>
                <tr class="text-center font-bold h-2" >
                  <td :rowspan="mentorRowsCount + 2" class="border border-solid border-black px-1 py-0.5 align-middle"
                    style="writing-mode: vertical-rl; text-orientation: mixed;">
                    培养人情况
                  </td>
                  <td rowspan="2" class="border border-solid border-black px-1 py-0.5">姓名</td>
                  <td colspan="2" class="border border-solid border-black px-1 py-0.5">现任职务</td>
                  <td rowspan="2" class="border border-solid border-black px-1 py-0.5">入党时间</td>
                  <td rowspan="2" class="border border-solid border-black px-1 py-0.5">文化程度</td>
                  <td rowspan="2" class="border border-solid border-black px-1 py-0.5">与被培养人一起工作的时间</td>
                  <td rowspan="2" class="border border-solid border-black px-1 py-0.5">何时起做培养人</td>
                </tr>

                <tr class="text-center font-bold h-2">
                  <td class="border border-solid border-black px-1 py-0.5">党内职务</td>
                  <td class="border border-solid border-black px-1 py-0.5">行政职务</td>
                </tr>

                <!-- 动态生成培养人行，确保至少5行 -->
                <tr v-for="(mentor, index) in mentorListWithEmpty" :key="`mentor-${index}`" class="text-center h-8">

                  <td class="border border-solid border-black px-1 py-0.5">{{ mentor?.mentorName || '' }}</td>
                  <td class="border border-solid border-black px-1 py-0.5">{{ mentor?.mentorName? '某职务': '' }}</td>
                  <td class="border border-solid border-black px-1 py-0.5">{{ mentor?.mentorName? '某职务': '' }}</td>
                  <td class="border border-solid border-black px-1 py-0.5">{{ mentor ? formatDate(mentor.joinPartyDate,'YYYY年MM月DD日')
                    : '' }}
                  </td>
                  <td class="border border-solid border-black px-1 py-0.5">{{ mentor?.mentorName? '高中/大学/其他': '' }}</td>
                  <td class="border border-solid border-black px-1 py-0.5">{{ formatDate(mentor?.workTogetherStart,'YYYY年MM月DD日') || '' }}</td>
                  <td class="border border-solid border-black px-1 py-0.5">{{ mentor ?
                    formatDate(mentor.mentorStartDate,'YYYY年MM月DD日') : ''
                  }}</td>
                </tr>

                <tr>
                  <td colspan="8" class="border border-solid border-black px-1 py-0.5 text-center font-bold">
                    入党积极分子主要表现
                  </td>
                </tr>
                <tr>
                  <td colspan="8" class="border border-solid border-black px-1 py-0.5 align-top">
                    <n-space vertical justify="space-between" class="min-h-[200px] h-full">
                      <div class="flex-grow text-justify">
                        {{ member.activistAssessment?.mainPerformance || '该同志政治立场坚定，思想觉悟较高，学习勤奋，工作积极，在群众中有良好影响。' }}
                      </div>
                      <n-space vertical align="end" :size="4" class="font-songti">
                        <div class="font-kaiti">党支部书记签名：{{ member.activistAssessment?.secretarySignature || '（未填写）' }}
                          （盖章）
                        </div>
                        <div class="flex items-center m-4">
                          <n-tooltip v-if="getValidationInfo('secretarySignatureDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16"
                                :color="getLevelColor(getValidationInfo('secretarySignatureDate').level)"
                                class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('secretarySignatureDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('secretarySignatureDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.activistAssessment?.secretarySignatureDate ,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div v-for="(record, index) in member.activistAssessment?.assessmentRecords" :key="`record-${index}`"
          :id="`section-inspection-${index + 1}`"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4">
          <div class="border border-solid border-black h-full">
            <table class="border-collapse h-full w-full text-[10px] leading-[1.2]">
              <tbody>
                <tr>
                  <td colspan="2" class="border border-solid border-black px-1 py-0.5 font-bold text-center">
                    培养考察写实
                  </td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 w-1/5 font-bold text-center align-middle">
                    培养联系人意见
                  </td>
                  <td class="border border-solid border-black px-1 py-0.5 align-top">
                    <n-space vertical justify="space-between" class="h-full">
                      <div class="flex-grow text-justify m-4">
                        {{ record.mentorOpinion || '该同志在本季度表现良好，继续加强理论学习，积极参加支部活动。' }}
                      </div>
                      <n-space vertical align="end" :size="2" class="font-songti m-4">
                        <div class="font-kaiti">培养人：{{ record.mentor1Name || '（未填写）' }}</div>
                        <div class="font-kaiti">培养人：{{ record.mentor2Name || '（未填写）' }}</div>
                        <div class="flex items-center mt-2">
                          <n-tooltip v-if="getValidationInfo('assessmentRecords')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('assessmentRecords').level)"
                                class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('assessmentRecords').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('assessmentRecords').message }}</span>
                          </n-tooltip>
                          {{ formatDate(record.mentorOpinionDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 w-1/5 font-bold text-center align-middle">
                    党小组意见
                  </td>
                  <td class="border border-solid border-black px-1 py-0.5 align-top">
                    <div class="h-full">（不用填）</div>
                  </td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 w-1/5 font-bold text-center align-middle">
                    党支部意见
                  </td>
                  <td class="border border-solid border-black px-1 py-0.5 align-top">
                    <n-space vertical justify="space-between" class="h-full">
                      <div class="flex-grow text-justify">
                        {{ record.branchOpinion || '同意培养联系人意见，继续培养考察。' }}
                      </div>
                      <n-space vertical align="end" :size="2" class="font-songti m-4">
                        <div class="font-kaiti">党支部书记：{{ record.branchSecretaryName || '（未填写）' }}</div>
                        <div class="flex items-center mt-2">
                          <n-tooltip v-if="getValidationInfo('assessmentRecords')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('assessmentRecords').level)"
                                class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('assessmentRecords').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('assessmentRecords').message }}</span>
                          </n-tooltip>
                          {{ formatDate(record.branchOpinionDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div id="section-training"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4">
          <div class="border border-solid border-black h-full flex">

            <div class="flex items-center justify-center w-12 border border-solid border-black  p-2">
              <span style="writing-mode: vertical-rl;">参加党内活动及接受培训情况</span>
            </div>

            <div class="flex-grow">
              <table class="border-collapse h-full w-full text-[10px] leading-[1.2]">
                <tbody>
                  <tr class="text-center font-bold">
                    <td class="border border-solid border-black px-1 py-0.5">时间</td>
                    <td :rowspan="2"  class="border border-solid border-black px-1 py-0.5">学习内容</td>
                    <td :rowspan="2" class="border border-solid border-black px-1 py-0.5">培训方式</td>
                    <td :rowspan="2" class="border border-solid border-black px-1 py-0.5">主办单位</td>
                  </tr>
                   <tr class="text-center font-bold">
                    <td class="border border-solid border-black px-1 py-0.5">何时起至何时止</td>
                
                  </tr>
                  <tr class="text-center">
                    <td class="border border-solid border-black px-1 py-0.5 h-8">{{
                      formatDate(member.activistAssessment?.trainingStartDate,'YYYY年MM月DD日') }} 至 {{
                        formatDate(member.activistAssessment?.trainingEndDate,'YYYY年MM月DD日') }}
                    </td>
                    <td class="border border-solid border-black px-1 py-0.5">入党积极分子教育培训</td>
                    <td class="border border-solid border-black px-1 py-0.5">半脱产</td>
                    <td class="border border-solid border-black px-1 py-0.5">校党委组织部</td>
                  </tr>
                  <tr class="text-center">
                    <td class="border border-solid border-black px-1 py-0.5 h-8">{{
                      formatDate(member.activistAssessment?.developmentTrainingStartDate,'YYYY年MM月DD日') }} 至 {{
                        formatDate(member.activistAssessment?.developmentTrainingEndDate,'YYYY年MM月DD日') }}</td>
                    <td class="border border-solid border-black px-1 py-0.5">发展对象入党前短期集中培训</td>
                    <td class="border border-solid border-black px-1 py-0.5">半脱产</td>
                    <td class="border border-solid border-black px-1 py-0.5">校党委组织部</td>
                  </tr>

                  <tr class="text-center" v-for="item in 17" :key="item">
                    <td class="border border-solid border-black px-1 py-0.5 h-8">&nbsp;</td>
                    <td class="border border-solid border-black px-1 py-0.5">&nbsp;</td>
                    <td class="border border-solid border-black px-1 py-0.5">&nbsp;</td>
                    <td class="border border-solid border-black px-1 py-0.5">&nbsp;</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div id="section-development-opinion"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 mt-8">
          <div class="border border-solid border-black h-full">
            <table class="border-collapse h-full w-full text-[10px] leading-[1.2]">
              <tbody>
                <tr>
                  <td colspan="5" class="border border-solid border-black px-1 py-0.5 text-center font-bold">
                    确定为发展对象的意见
                  </td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center align-top">支委会或支部大会意见
                  </td>
                  <td colspan="4" class="border border-solid border-black px-1 py-0.5 align-top">
                    <n-space vertical justify="space-between" class="min-h-[150px] h-full">
                      <div class="flex-grow text-justify">{{ member.activistAssessment?.committeeOpinion ||
                        '经支委会讨论，一致同意确定为发展对象。' }}</div>
                      <n-space vertical align="end" :size="4" class="font-songti">
                        <div class="font-kaiti text-right">
                          党支部书记签名盖章：{{ member.activistAssessment?.committeeSignature || '（未填写）' }}
                        </div>
                        <div class="flex items-center justify-end">
                          <n-tooltip v-if="getValidationInfo('committeeOpinionDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('committeeOpinionDate').level)"
                                class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('committeeOpinionDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('committeeOpinionDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.activistAssessment?.committeeOpinionDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>
                <tr>
                  <td class="border border-solid border-black px-1 py-0.5 font-bold text-center align-top">群众座谈意见</td>
                  <td colspan="4" class="border border-solid border-black px-1 py-0.5 align-top">
                    <n-space vertical justify="space-between" class="min-h-[150px] h-full">
                      <div class="flex-grow text-justify">
                        经群众座谈，一致同意。</div>
                      <n-space vertical align="end" :size="4" class="font-songti">
                        <div class="font-kaiti text-right">
                          组织委员签名盖章：{{ member.activistAssessment?.massDiscussionOrganizerSignature || '（未填写）' }}
                        </div>
                        <div class="flex items-center justify-end">
                          <n-tooltip v-if="getValidationInfo('massDiscussionDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('massDiscussionDate').level)"
                                class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('massDiscussionDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('massDiscussionDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.activistAssessment?.massDiscussionDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                      </n-space>
                    </n-space>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </n-space>
    </div>
    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="500">
          <n-anchor-link title="封面" href="#section-cover" />
          <n-anchor-link title="填写说明" href="#section-instruction" />
          <n-anchor-link title="基本信息" href="#section-basic-info" />
          <n-anchor-link title="培养人情况" href="#section-mentor-info" />
          <n-anchor-link v-for="(record, index) in member.activistAssessment?.assessmentRecords"
            :key="`anchor-inspection-${index}`" :title="`考察写实 ${index + 1}`"
            :href="`#section-inspection-${index + 1}`" />
          <n-anchor-link title="培训情况" href="#section-training" />
          <n-anchor-link title="发展意见" href="#section-development-opinion" />
        </n-anchor>
      </div>
    </div>

  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { NTooltip, NIcon, NSpace, NAffix, NAnchor, NAnchorLink } from 'naive-ui'
import { formatDate } from '@/utils/dateUtils'
import { getLevelColor, getIconComponent } from '@/utils/levelUtils.js'

const documentContainer = ref(null)

const props = defineProps({
  member: {
    type: Object,
    default: () => ({
      applicationForm: {},
      activistAssessment: {
        mentorList: [],
        assessmentRecords: []
      }
    }),
  },
  validation: { type: Array, default: () => [] }
})

// 验证信息处理逻辑
function getValidationInfo(key) {
  if (!props.validation || !Array.isArray(props.validation)) {
    return null
  }
  return props.validation.find(item => item.key === key)
}



// 培养人列表补齐到5个
const mentorListWithEmpty = computed(() => {
  const mentors = props.member?.activistAssessment?.mentorList || []
  const result = [...mentors]

  // 如果不足5个，补充空对象
  while (result.length < 5) {
    result.push(null)
  }

  return result
})

// 培养人行数计算（包含空行）
const mentorRowsCount = computed(() => {
  return Math.max(5, props.member?.activistAssessment?.mentorList?.length || 0)
})
</script>

<style scoped>
.underline {
  text-decoration: underline;
}

.font-songti {
  font-family: "SimSun", "STSong", serif;
}

.font-kaiti {
  font-family: "KaiTi", "STKaiti", serif;
}

/* 表格样式 */
table {
  font-size: 14px;
}

td {
  vertical-align: top;
}
</style>